<template>
  <up-loading-page :loading="loading"></up-loading-page>
  <view v-if="!loading" class="container">
    <view class="resultbox">
			<view class="zhengque" style="margin-top: -30rpx;" >
				<image src="http://static.fastht.com/bd8c8e2d31a64f3d/c8ceee810f2a1c63.png" class="cuowu-img" mode=""></image>
				<view class="result">
					答案正确
				</view>
				<view class="des">
					答题正确！请点击下方的 开 领取奖励！
				</view>
			</view>
			<!-- <view class="cuowu" v-else>
				<image src="/static/images/cuowu.png" class="cuowu-img" mode=""></image>
				<view class="result">
					答案有误
				</view>
			</view> -->
		</view>
		<view class="hongbaobox">
			<view class="hb-title" style="font-size: 32rpx;">
				若遇活动高峰期，延迟到账属正常情况，请勿担心！
			</view>
      <image src="http://static.fastht.com/c2e9c0f4dc4db3b7/3e0e1360b5db9312.png" class="hb-btn" mode=""  @click="handleOpen"></image>
		</view>
	
  </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { redirect } from '@/utils/common';


const loading = ref(false)
const options = ref<any>()

function handleOpen() {
  const text = `恭喜您获得${options.value?.money||0}元${options.value?.point||0}积分，红包已付款到微信红包中，请稍后留意查看`
  // 提示
  uni.showModal({
    title: '领取成功',
    content: text,
    showCancel: false,
    success: function (res) {
      if (res.confirm) {
        redirect({ 
            url: '/addon/htscrm/pages/video/index', 
            param: { 
                activity_id: options.value?.huodong_id,
            }, 
            mode: 'redirectTo' 
        })
      }
    }
  })
}

onLoad((data:any) => {
  options.value = data
})
</script>
<style lang="scss" scoped>
.container {
  background-color: #f6f7f8;
  min-height: 100vh;

  
	.resultbox{
		width: 100%;
		height: 320rpx;
		text-align: center;
		padding-top: 120rpx;
		box-sizing: border-box;
	}
	.cuowu-img{
		width: 100rpx;
		height: 100rpx;
	}
	.datibox{
		color: #333;
		margin: 24rpx;
		background: #fff;
		padding: 30rpx;
		position: absolute;
		left: 0;
		width: calc(100% - 48rpx);
		box-sizing: border-box;
		background-color: #F3F3F3;
		height: calc(100vh - 140rpx - 340rpx - 30rpx);
		overflow-y: scroll;
		
	}
	.item{
		margin-bottom: 14rpx;
	}
	.dati-title{
		border-bottom: 2rpx solid #eee;
		line-height: 1.5;
	}
	.optionbox{
		box-sizing: border-box;
		padding: 20rpx;
	}
	.option-li{
		display: flex;
		align-items: center;
		font-size: 30rpx;
		padding: 12rpx 0;
		box-sizing: border-box;
	}
	.xx-xuhao{
		height: 52rpx;
		width: 52rpx;
		border: 2rpx solid #bbb;
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		font-size: 36rpx;
	}
	.xx-xuhao.duoxuan{
		border-radius: 10rpx;
	}
	.xx-xuhao.xuanzhong{
		background: #f00;
		color: #fff;
		border-color: #f00;
	}
	
	.xx-xuhao.isdaan{
		background: #06AD56;
		color: #fff;
		border-color: #06AD56;
	}
	.xx-content{
		width: calc(100% - 62rpx - 20rpx);
	}

	.bottombox{
		height: 140rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		bottom: 20rpx;
		background-color: #fff;
	}
	.fanhui-btn{
		background-color: #F1F1F1;
		color: #007AFF;
		border-radius: 14rpx;
		width: 400rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 38rpx;
	}
	 .cuowu-title
	{
	   
		text-align:center;
		position:relative;
		margin-bottom: 30rpx;
	}
	.cuowu-title view:before,.cuowu-title view:after
	{
		position:absolute;
		background:#ccc;
		content:"";
		height:2rpx;
		top:50%;
		width:150rpx;
	}
	.cuowu-title view:before{left:90rpx;}
	.cuowu-title view:after{right:90rpx;}
	
	.typename{
		padding: 6rpx 14rpx;
		background: #2e96fc;
		color: #fff;
		border-radius: 8rpx;
		font-size: 24rpx;
		margin-right: 14rpx;
	}
	.des{
		font-size: 28rpx;
		color: #888;
		margin-top: 10rpx;
	}
	.result{
		margin-top: 10rpx;
		font-size: 36rpx;
		font-weight: 600;
	}
	.hongbaobox{
		background: url(http://static.fastht.com/af08b9aad5125f01/e9527c712ec634b0.png) no-repeat;
		background-size:100% 100% ;

		height: 691rpx;
		width: 681rpx;
		margin: 20rpx auto;
		text-align: center;
		position: relative; 
	}
	.hb-title{
		font-size: 32rpx;
		color: #fff;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		    top: 200rpx;
		    width: 400rpx;
	}
	.hb-btn{
		width: 180rpx;
		height: 180rpx;
		border-radius: 100%;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: 370rpx;
	}
	.jiedanbox{
		/* border: 2rpx solid #bbb; */
		padding: 20rpx;
		background: #def4ff;
		border-radius: 14rpx;
		margin-bottom: 40rpx;
		font-size: 28rpx;
	}

}
</style>